.courseListContainer {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-top: 30px;
  font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, 'lucida grande',
    'lucida sans unicode', lucida, helvetica;
  .courseItem {
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-right: 30px;
    margin-bottom: 30px;
    transition: 0.3s ease;
    .courseName {
      width: 213px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 10px;
      font-weight: bold;
    }
    .mantle {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 24px;
      display: none;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      .mantleItem {
        display: flex;
        color: #fff;
        flex-direction: column;
        justify-content: center;
        margin: 0 15px;
        align-items: center;


        &:hover {
          color: #3399ff;
        }
      }
    }
    .checkIcon {
      opacity: 0;
      left: 5px;
      top: 5px;
      position: absolute;
    }
    .selectIcon {
      display: none;
      left: 5px;
      top: 5px;
      position: absolute;
    }
    .checkIconTrue {
      display: none;
    }
    .editorItem {
      cursor: pointer;
      &:hover {
        color: #3399ff;
      }
    }
    &:hover {
      border: 1px solid #1890ff;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      transform: translateY(-10px);
      img {
        filter: brightness(40%);
      }
      .mantle {
        display: block;
      }
      .selectIcon {
        display: none;
      }
      .checkIcon {
        opacity: 1;
      }
    }
  }
}